<template>
	<div class="video">
		<video
			ref="videoPlayer"
			class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
			style="width: 100%"
		></video>
		<div class="btn" @click="changeVideo">改变视频</div>
	</div>
</template>

<script>
import Video from 'video.js';
import 'video.js/dist/video-js.css';

export default {
	name: 'video',
	data() {
		return {
			player: null, //播放器dom
			list: [
				{
					poster: 'https://kchi.obs.cn-north-4.myhuaweicloud.com/b9ed4e2f-643f-456d-996d-347d92d3257c.png',
					src: 'https://vod.hbrhcloud.com/asset/16519eb3f021178434deddfe1519598e/81fedd1ce03bbc1f3e7723cc40e2c8c2.mp4',
				},
				{
					poster: 'https://kchi.obs.cn-north-4.myhuaweicloud.com/22b0c451-c70b-4d0a-9896-43cc75d425e1.png',
					src: 'https://vod.hbrhcloud.com/asset/1e4baa2a121b31bc77e1638c3108dbaa/3a3065f94d60e674d6e7e72dd11bc487.mp4',
				},
			],
			options: {
				playbackRates: [0.5, 1, 1.5, 2], //倍速
				autoplay: false, //自动播放
				controls: true, //控制器
				playsinline: true, //进度条拖拽
				poster: '', //视频封面
				sources: [
					{
						src: '',
						type: 'video/mp4',
					},
				],
				controlBar: {
					pictureInPictureToggle: false, //关闭画中画
				},
			},
		};
	},
	mounted() {
		const that = this;
		this.options.poster = this.list[0].poster;
		this.options.sources = [
			{
				src: that.list[0].src,
				type: 'video/mp4',
			},
		];

		this.player = Video(this.$refs.videoPlayer, this.options, function onPlayerReady() {
			console.log('onPlayerReady');
		});
	},
	methods: {
		changeVideo() {
			const that = this;
			this.player.poster(that.list[1].poster);
			this.player.src([
				{
					src: that.list[1].src,
					type: 'video/mp4',
				},
			]);
		},
	},
};
</script>

<style lang="scss" scoped>
.btn {
	width: 80px;
	height: 40px;
	line-height: 40px;
	margin: 20px auto 0;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 5px;
}
</style>
<style>
/* 圆形播放按钮 */
.video-js .vjs-big-play-button {
	font-size: 2.5em !important;
	line-height: 2.3em !important;
	height: 2.5em !important;
	width: 2.5em !important;
	-webkit-border-radius: 2.5em !important;
	-moz-border-radius: 2.5em !important;
	border-radius: 2.5em !important;
	background-color: #73859f;
	background-color: rgba(115, 133, 159, 0.5) !important;
	border-width: 0.15em !important;
	margin-top: -1.25em !important;
	margin-left: -1.25em !important;
}
.vjs-big-play-button .vjs-icon-placeholder {
	font-size: 1.63em !important;
}
/* 暂停显示播放按钮 */
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block !important;
}
</style>
